dropdown menu (Scrapbox) の色を変えるUserCSS

使い方

1. style.cssを自分のページかSettingsにコピーする

2. custom propertiesを設定する

e.g.

code:css

body {

--dropdown-menu-bg: #373b44;

--dropdown-menu-border: 1px solid #8888882d;

--dropdown-menu-text-color: var(--page-text-color);

--dropdown-menu-divider-color: #e5e5e5;

--dropdown-menu-text-hover-color: var(--page-text-color);

--dropdown-menu-text-hover-bg: #373b44;

}

code:style.css

.dropdown-menu,

.drawer .drawer-menu{

background-color: var(--dropdown-menu-bg, #fff);

border: var(--dropdown-menu-border, unset);

}

.dropdown-menu > li > a,

.drawer .drawer-menu ul li a,

.page-menu ul > li > div {

color: var(--dropdown-menu-text-color, #333);

}

.dropdown-menu>li>a:active,

.drawer-menu ul li a:active,

data-hover-visible :is(.dropdown-menu,.drawer-menu)

li > :is(a:hover, a:focus) {

color: var(--dropdown-menu-text-hover-color, #262626);

background-color: var(--dropdown-menu-text-hover-bg, #f5f5f5);

}

:is(.dropdown-menu, .drawer-menu) .divider {

color: var(--dropdown-menu-divider-color, #e5e5e5);

}

#2022-02-21 16:34:02 dividerの色変えた

CSSも少しスッキリさせた

.dividerはbackground-colorではなくcolorの色を変える